<template name="commentHeader">
	<view class="commentHeader">
		<view class="left">
			<image lazy-load class="avatar_image" :src="item.author.avatar_url" mode="scaleToFill"></image>
			<text class="nick_name">{{ item.author.nickname }}</text>
		</view>
		<view class="right">
			<view class="up" @click="commentLike(0)">
				<text class="iconfont icon-up" @click.stop="commentLike(0)" :style="{ color: item.like_status.up ? '#FF7C97' : '#149EFF' }"></text>
			</view>
			<view class="num">{{ item.likes }}</view>
			<view class="down" @click="commentLike(1)">
				<text class="iconfont icon-down" @click.stop="commentLike(1)" :style="{ color: item.like_status.down ? '#FF7C97' : '#149EFF' }"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'commentHeader',
	props: ['item'],
	data() {
		return {};
	},
	methods: {
		removeSlef() {
			this.$emit('removeSlef');
		},
		commentLike(like_type) {
			if (this.item.like_status.up == this.item.like_status.down){
				this.$emit('commentLike', like_type);
			}else{
				if ((this.item.like_status.up && like_type === 1) || (this.item.like_status.down && like_type === 0)) {
					this.$emit('commentLike', like_type);
				}
			}
			
		}
	}
};
</script>

<style lang="scss">
.commentHeader {
	background-color: white;
	position: relative;
	width: 100%;
	height: 90rpx;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	padding-bottom: 10rpx;
	.left {
		.avatar_image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50rpx;
		}

		.nick_name {
			font-size: 28rpx;
			padding-left: 15rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
		}

		.cloes {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}
	.right {
		.icon-up,
		.icon-down {
			color: white;
			font-size: 50rpx;
		}
		.num {
			margin: 0 20rpx;
			color: #149eff;
			height: 60rpx;
			line-height: 60rpx;
		}
	}
}
</style>
